<template>
  <view class="mxp-empty" :class="cusClass" :style="[cusStyle]">
    <image class="img" :style="{ width, height }" :src="data.img" mode="widthFix"></image>
    <text class="text" :style="[msgStyle, { color: msgColor, fontSize: msgSize }]">
      {{ data.msg }}
    </text>
    <view class="slot-wrap">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { type CSSProperties, computed } from 'vue';
  import fail_load from './image/ico_g_fail_load.svg';
  import not_data from './image/ico_g_not_data.svg';
  import not_login from './image/ico_g_not_login.svg';
  import not_permission from './image/ico_g_not_permission.svg';
  import not_network from './image/ico_g_not_network.svg';

  export type EmptyState = 'fail_load' | 'not_data' | 'not_login' | 'not_network' | 'not_permission';

  export type $Props = {
    /** 图标路径  */
    img?: EmptyState | (string & {});
    /** 提示文字 */
    msg?: string;
    /** 提示文字颜色 */
    msgColor?: $AllColorStr;
    /** 提示文字大小 */
    msgSize?: $SizeUnitStr;
    /** 信息 */
    width?: $SizeUnitStr;
    /** 文本颜色 */
    height?: $SizeUnitStr;
    /** 自定义的样式属性 */
    cusStyle?: CSSProperties;
    /** 自定义的样式属性 */
    msgStyle?: CSSProperties;
    /** 自定义类名 */
    cusClass?: string;
  };

  defineOptions({
    name: 'mxp-empty',
  });
  const props = withDefaults(defineProps<$Props>(), {
    img: 'not_data',
    msg: undefined,
    icon: undefined,
    msgColor: '#999999',
    msgSize: '12px',
    width: '120px',
    height: '120px',
    cusStyle: () => ({}),
    msgStyle: () => ({}),
    cusClass: '',
  });
  defineSlots<{
    /** 主体内容 */
    default?: () => void;
  }>();

  const textObj = {
    fail_load: { img: fail_load, msg: '加载失败' },
    not_data: { img: not_data, msg: '暂无数据' },
    not_login: { img: not_login, msg: '未登录' },
    not_permission: { img: not_permission, msg: '暂无权限' },
    not_network: { img: not_network, msg: '暂无网络' },
  };

  const data = computed(() => {
    const _data = props.img in textObj ? textObj[props.img as keyof typeof textObj] : textObj.not_data;
    _data.msg = props.msg ?? _data.msg;
    return _data;
  });
</script>

<style lang="scss" scoped>
  .mxp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    .text {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 15px;
    }
  }

  .slot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
  }
</style>
